<template>
    <div class="fbx2gltf">
        <a-divider>FBX转GLTF</a-divider>
        <a-form-model ref="form" hideRequiredMark :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"
            :rules="rules">
            <a-form-model-item label="模型文件" class="model-form-item" prop="inputFile">
                <a-input v-model="form.inputFile" style="width:50%" readOnly />
                <a-row style="width:48%;margin-left:2%">
                    <a-button type="info" @click="handleSelectFolder('input')">选择文件</a-button>
                    <a-checkbox style="margin-left:10px" v-model="form.isInputInvaildValue"
                        @change="(e)=>handleChangeCheckbox(e,'input')">
                        启用无效值
                    </a-checkbox>
                </a-row>
            </a-form-model-item>

            <a-form-model-item label="保存目录" class="model-form-item" prop="outputFileDir">
                <a-input v-model="form.outputFileDir" readOnly style="width:50%">
                    <a-select slot="addonAfter" v-model="form.format" style="width: 60px">
                        <a-select-option v-for="item in formats" :value="item.value" :key="item.value">
                            {{item.label}}
                        </a-select-option>
                    </a-select>
                </a-input>
                <a-row style="width:48%;margin-left:2%">
                    <a-button type="info" @click="handleSelectFolder('output')">选择目录</a-button>
                    <!-- <a-checkbox style="margin-left:10px" v-model="form.isOutPutInvalidValue"
                        @change="(e)=>handleChangeCheckbox(e,'output')">
                        启用无效值
                    </a-checkbox> -->
                </a-row>
            </a-form-model-item>

            <a-form-model-item :wrapper-col="{ span: 14, offset: 7 }">
                <a-button type="primary" @click="handleStartOperation">
                    处理
                </a-button>
                <a-button style="margin-left: 10px;" @click="handleEndOperation">
                    关闭
                </a-button>
            </a-form-model-item>
        </a-form-model>
    </div>
</template>

<script>
import { ipcApiRoute } from "@/api/main";
import storage from "store";

export default {
    data() {
        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 20 },
            rules: {
                inputFile: [
                    { required: true, trigger: "blur", message: "不能为空" },
                ],

                outputFileDir: [
                    { required: true, trigger: "blur", message: "不能为空" },
                ],
            },
            form: {
                inputFile: undefined,
                isInputInvaildValue: false,
                outputFileDir: undefined,
                isOutPutInvalidValue: false,
                format: "glb",
            },

            formats: [
                { label: "glb", value: "glb" },
                { label: "gltf", value: "gltf" },
            ],
        };
    },

    mounted() {
        this.form.inputFile = storage.get("default_input_dir") || "";
        this.form.outputFileDir = storage.get("default_output_dir") || "";
    },
    methods: {
        /**
         * @desc 开始操作
         */
        handleStartOperation() {
            const self = this;
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let inputFileSplitStr = this.form.inputFile.split("\\");
                    let name =
                        inputFileSplitStr[inputFileSplitStr.length - 1].split(
                            "."
                        )[0];
                    let isValidStr = this.form.isInputInvaildValue ? "d" : "b";
                    let cmdStr = `-i ${this.form.inputFile}  -o ${
                        this.form.outputFileDir
                    }\\${name}-${Date.now()}.${
                        this.form.format
                    } -${isValidStr}`;

                    self.$ipcInvoke(ipcApiRoute.modelConversion, cmdStr).then(
                        (r) => {
                            self.$message.info(r);
                        }
                    );
                }
            });
        },

        /**
         * @desc 结束操作
         */
        handleEndOperation() {
            const self = this;
            self.$ipcInvoke(ipcApiRoute.closeModelConversion).then((r) => {
                self.$message.info(r);
            });
        },

        handleChangeCheckbox(e, type) {
            let checked = e.target.checked;
            let propObj = {
                input: "isInputInvaildValue",
                out: "isOutPutInvalidValue",
            };
            this.form[propObj[type]] = checked;
        },

        handleSelectFolder(type) {
            const self = this;
            let filters = [
                { name: "model", extensions: ["fbx", "pak", "gltf"] },
            ];
            switch (type) {
                case "input":
                    self.$ipcInvoke(ipcApiRoute.selectFile, { filters }).then(
                        (dir) => {
                            dir && (this.form.inputFile = dir);
                            dir && self.$message.info("输入文件为:" + dir);
                            dir && storage.set("default_input_dir", dir);
                        }
                    );
                    break;

                case "output":
                    self.$ipcInvoke(ipcApiRoute.selectFolder).then((dir) => {
                        dir && (this.form.outputFileDir = dir);
                        dir && self.$message.info("输出目录为:" + dir);
                        dir && storage.set("default_output_dir", dir);
                    });
                    break;

                default:
                    break;
            }
        },
    },
};
</script>

<style lang='less' scoped>
.fbx2gltf {
    width: 100%;
    padding: 0 10px;
    text-align: left;
}
</style>

<style lang='less'>
.model-form-item {
    .ant-form-item-control-wrapper {
        .ant-form-item-children {
            display: flex;
            align-items: center;
            user-select: none;
        }

        .ant-form-explain {
            visibility: hidden;
        }
    }
}
</style>